<template>
    <div class="container">
        <div class="changeType" @click="pick">
            <text class="changeTypeLeft">{{items[index]}}</text>
            <text class="changeTypeRight">切换</text>
        </div>

        <div class="resultbox">
            <div class="resultTit">
                <text class="resultTitTextLeft">{{result[index]}}</text>
                <div class="resultTitTextRight">
                    <text class="resultTitNum">4</text>
                    <icon class="resultTitIcon" :eeui="{content:'tb-unfold',fontSize:38}"></icon>
                </div>
                
            </div>

            <div class="resultShow">
                <div class="resultShowItem">
                    <div class="resultShowImageBox">
                        <image class="resultShowImage" src="http://oss.asyke.com/user/100377/course/564/101038/file/20190912/1568258812795042.jpg?x-oss-process=image/resize,h_100" style="width:90px;height:90px"></image>
                        <text class="resultShowImagetext">未发布</text>
                    </div>
                    
                    <div class="resultShowCneterWorld">
                        <text class="resultShowCneterWorldTit">作业 2020/01</text>
                        <text class="resultShowCneterWorldTit2">个人作业/0 人参与</text>
                        
                        
                        
                    </div>
                    <icon class="resultShowIcon" :eeui="{content:'ios-more',fontSize:38}"></icon>
                    <div class="resultShowCneterrightWorld">
                        <div class="resultShowCneterrightBtn" @click="sendPush">
                            <icon class="sendpushIcon" :eeui="{content:'ios-send',fontSize:24}"></icon>
                            <text class="sendPushBtn">发布</text>
                        </div>
                        
                    </div>
                </div>
                 <div class="resultShowItem">
                    <div class="resultShowImageBox">
                        <image class="resultShowImage" src="http://oss.asyke.com/user/100377/course/564/101038/file/20190912/1568258812795042.jpg?x-oss-process=image/resize,h_100" style="width:90px;height:90px"></image>
                        <text class="resultShowImagetext">未发布</text>
                    </div>
                    
                    <div class="resultShowCneterWorld">
                        <text class="resultShowCneterWorldTit">作业 2020/01</text>
                        <text class="resultShowCneterWorldTit2">个人作业/0 人参与</text>
                        
                        
                        
                    </div>
                    <icon class="resultShowIcon" :eeui="{content:'ios-more',fontSize:38}"></icon>
                    <div class="resultShowCneterrightWorld">
                        <div class="resultShowCneterrightBtn" @click="sendPush">
                            <icon class="sendpushIcon" :eeui="{content:'ios-send',fontSize:24}"></icon>
                            <text class="sendPushBtn">发布</text>
                        </div>
                        
                    </div>
                </div>
                 <div class="resultShowItem">
                    <div class="resultShowImageBox">
                        <image class="resultShowImage" src="http://oss.asyke.com/user/100377/course/564/101038/file/20190912/1568258812795042.jpg?x-oss-process=image/resize,h_100" style="width:90px;height:90px"></image>
                        <text class="resultShowImagetext">未发布</text>
                    </div>
                    
                    <div class="resultShowCneterWorld">
                        <text class="resultShowCneterWorldTit">作业 2020/01</text>
                        <text class="resultShowCneterWorldTit2">个人作业/0 人参与</text>
                        
                        
                        
                    </div>
                    <icon class="resultShowIcon" :eeui="{content:'ios-more',fontSize:38}"></icon>
                    <div class="resultShowCneterrightWorld">
                        <div class="resultShowCneterrightBtn" @click="sendPush">
                            <icon class="sendpushIcon" :eeui="{content:'ios-send',fontSize:24}"></icon>
                            <text class="sendPushBtn">发布</text>
                        </div>
                        
                    </div>
                </div>
               
            </div>
        </div>



    </div>
</template>
<script>
    const eeui = app.requireModule('eeui');
    const picker = weex.requireModule('picker');
     export default {
         data(){
             return{
                 timeValue: '',
                dateValue: '',
                index:0,
                result:['未分组' ,'未发布'],
                items:['按分组名称显示','按发布状态显示']
             }
         },
        methods: {

            pick () {
                var self = this;
                picker.pick({
                items: self.items,
                index:self.index,
                }, function(event){
                    if (event.result === 'success') {
                        self.index = event.data;
                        //eeui.toast(event)
                    }
                })
            },

            sendPush(){
                var self = this;
                eeui.alert({
                   title:'信息提示' ,
                   message:'你确定要发布吗？'
                }, function(){

                })
            }
        }
     }
</script>
<style scoped>
.container{
    width: 750;
    background-color: #fff;
}
.changeType{
    width: 750;
    flex-direction: row;
    justify-content:space-between;
    padding-left: 30;
    padding-right: 30;
    height: 88;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #ebebeb;
}
.changeTypeRight{
    font-size: 30;
    color: #45d586;
    line-height: 88px;
}
.changeTypeLeft{
    font-size: 30;
    color: #666;
    line-height: 88px;
}
.resultTit{
    width: 750;
    flex-direction: row;
    justify-content:space-between;
    padding-left: 30;
    padding-right: 30;
    height: 70;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #ebebeb;
    background-color:#fafafa;
}
.resultTitTextLeft{
    font-size:28px;
    line-height:70;
}
.resultTitTextRight{
    flex-direction:row;
}
.resultTitNum{
    font-size:28px;
    line-height:70;
    margin-right:20;
}
.resultTitIcon{
    width:50px;
    height:70px;
    color:#999;
}
.resultShowItem{
    flex-direction:row;
    height:120px;
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:#ebebeb;
    margin-left:20px;
    margin-right:20px;
}
.resultShowCneterWorldTit{
   font-size:28;
   color:#333; 
   margin-bottom:5px;
   font-weight:bold;
}
.resultShowCneterWorldTit2{
    font-size:22px;
    color:#666;
    font-weight:bold;
    margin-bottom:10px;
}
.resultShowCneterWorldTit3{
    flex-direction:row;
}
.resultShowCneterWorldTit3Icon{
    width:30;
    height:25;
    color:#fe7d77;
}
.resultShowCneterWorldTit4{
    color:#fe7d77;
}

.resultShowCneterWorld{
    margin-top:25px;
    margin-left:20px;
    width:300px;
}
.resultShowIcon{
    width:100px;
    height:120px;
    margin-left:20px;
    color:#999;
}
.resultShowCneterrightBtn{
    width:120px;
    height:46px;
    color:#45d586;
    border-width:1px;
    border-style:solid;
    border-color:#45d586;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    margin-top:36;
}
.sendpushIcon{
    width:30;
    height:25;
    color:#45d586;
}
.sendPushBtn{
    color:#45d586;
    font-size:22;
}
.personNum{
    font-size:22px;
    text-align:center;
    color:#999;
}
.resultShowCneterrightWorld{
    margin-left:30px;
}
.resultShowImageBox{
    position:relative;
    width:90;
    height:90;
    margin-top:15px;
    margin-left:10px;
}
.resultShowImagetext{
    width:90;
    position:absolute;
    bottom:0;
    left:0;
    background-color:rgba(0, 0, 0, 0.24);
    font-size:20px;
    height:30px;
    line-height:30px;
    color:#fff;
    text-align:center;
}
</style>